<template>
  <div class="box">
    <div class="show-content">
      <div class="you">
        <el-image
          style="height: 180px; width: 180px;border-radius: 50%;margin-top: 60px"
          :src="user.uphoto"
          :preview-src-list="[user.uphoto]">
        </el-image>
        <div style="margin-left: 50px;margin-top:25px;color: white">
          {{ user.uName }} {{ user.uAge }}岁
        </div>
      </div>
      <div style="height: 500px;width: 500px;color: white" class="zuo">
        性别： {{ user.uSex }}
        <br>
        <br>
        <br>
        身份证: {{ user.uIdentity }}
        <br>
        <br>
        <br>
        手机号：{{ user.uPhone }}
        <br>
        <br>
        <br>
        地址： {{ user.uAddress }}
        <br>
        <br>
        <br>
        爱好： {{ user.uhobby }}
        <br>
        <br>
        <br>
        签名： {{ user.signature }}
        <div style="display: flex;align-items: center">
          <el-button type="primary" @click="dialogFormVisiblee" style="margin-left: 300px;">修改个人信息</el-button>
          <el-button type="success" @click="zhu">注销个人账号</el-button>
        </div>
      </div>
      <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" >
        <el-form v-model="usere">
          <el-form-item label="头像">
            <label for="fileImage">
              <img id="img1"
                   :src="usere[0].uphoto"
                   alt="" width="50px" height="50px" style="margin-left: 140px; border-radius: 50%;">
            </label>
            <input type="file" id="fileImage" v-show="false" name="fileImage" @change="showImg"/>
          </el-form-item>
          <el-form-item label="姓名">
            <input class="el-input__inner" type="text" v-model="usere[0].uname">
          </el-form-item>
          <el-form-item label="手机号">
            <input type="text" class="el-input__inner" v-model="usere[0].uphone">
          </el-form-item>
          <el-form-item label="个性签名">
            <input type="text" class="el-input__inner" v-model="usere[0].signature">
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="tj">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
import axios from 'axios'

export default {
  data () {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      dialogFormVisible: false,
      user: Cookies.get('use') ? JSON.parse(Cookies.get('use')) : {},
      usere: [{
        uid: null,
        uname: null,
        uphone: null,
        signature: null,
        uphoto: null
      }],
      imgType: '',
      imageUrl: ''
    }
  },
  methods: {
    dialogFormVisiblee () {
      this.usere[0].uid = this.user.uid
      this.usere[0].uname = this.user.uName
      this.usere[0].uphone = this.user.uPhone
      this.usere[0].signature = this.user.signature
      this.usere[0].uphoto = this.user.uphoto
      this.dialogFormVisible = true
      console.log(this.user)
      console.log(this.usere)
    },
    showImg: function (e) {
      const that = this
      const file = document.getElementById('fileImage').files[0]
      this.imgType = file.name.substring(file.name.lastIndexOf('.') + 1)
      // console.log(file)
      if (window.FileReader) {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        // 监听文件读取结束后事件
        reader.onloadend = function (e) {
          // e.target.result就是最后的路径地址
          document.getElementById('img1').setAttribute(':src', e.target.result)
          that.usere[0].uphoto = e.target.result
          that.imageUrl = e.target.result
          console.log(that.imageUrl)
        }
      }
    },
    tj () {
      if (this.usere[0].uname === '') {
        this.$notify.error('请输入姓名')
        return false
      }
      const phonePattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (phonePattern.test(this.usere[0].uphone) || this.usere[0].uphone === '') {
        if (this.imgType === '') {
          this.imgType = Cookies.get('imgType')
          console.log(this.imgType)
        }
        let imgURl = null
        if (this.imageUrl === '' || this.imageUrl === null) {
          imgURl = this.usere[0].uphoto
        } else {
          imgURl = this.imageUrl.replace(/^data:image\/\w+;base64,/, '')
        }
        const data = {
          uid: this.usere[0].uid,
          uName: this.usere[0].uname,
          uPhone: this.usere[0].uphone,
          signature: this.usere[0].signature,
          uphoto: imgURl
        }
        const loading = this.$loading({
          lock: true,
          text: '正在修改请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        axios.defaults.withCredentials = true
        axios({
          method: 'post',
          url: 'http://152.136.143.223:9091/MyMsg/update/' + this.imgType + '/' + this.user.uPhone,
          headers: { 'Content-Type': 'application/json;charset=UTF-8' },
          withCredentials: true,
          data: (data)
        }).then((res) => {
          if (res.data > 0) {
            loading.close()
            this.$notify.success('修改成功')
            this.dialogFormVisible = false
            this.$router.push({
              path: '/login'
            })
          }
        })
      } else {
        this.$notify.error('请输入合格手机号')
      }
    },
    zhu () {
      console.log(this.usere[0])
      axios.defaults.withCredentials = true

      axios({
        url: 'http://152.136.143.223:9091/MyMsg/zhu/' + this.user.uid,
        method: 'put'
      }).then(res => {
        this.$router.push({
          path: '/login'
        })
        this.$notify.error('账号已注销')
        Cookies.remove('use')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 220px;
  margin-top: 80px;

  .show-content {
    //background-color: #b6d871;
    min-height: 600px;
    height: 100%;
    width: 100%;

    .you {
      float: left;
    }

    .zuo {
      margin-left: 230px;
      margin-top: 50px;
    }
  }
}
</style>
